<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 
                给元素绑定事件有两种方法：
                    1.通过 v-on:事件名="处理函数名"
                    2.通过 @事件名="处理函数名"
                注意：
                    1.这两者都可以绑定事件处理函数，但是事件处理函数一定要放在vue实例中声明，并且一定不能使用箭头函数
                    2.另外，当处理函数不需要传递参数的时候，元素绑定事件处理函数的时候就不用写小括号，处理函数内部也能拿到事件event
             -->
            <button v-on:click="showinfo1">showinfo1</button>
            <button @click="showinfo2(123)">showinfo2</button>
        </div>

        <script>
            const vm = new Vue({
                data: {
                    name: "xuhu",
                },
                methods: {
                    showinfo1(event) {
                        console.log(event);
                    },
                    showinfo2(num) {
                        console.log(event.target.innerText);
                        console.log(num);
                    },
                },
            });

            vm.$mount("#root");
        </script>
    </body>
</html>
